<template>
  <template v-if="show">
    <template v-if="friendsList?.size">
      <friends-list-data
        :friends-data="friendsList"
        :title="title"
        :type="type"
      ></friends-list-data>
    </template>
    <div class="friManage-empty flex" v-else>
      <div>
        <SvgIcon icon-class="emptyData" popper-class="friManage-empty__icon" />
        <p class="friManage-empty__desc">暂无符合条件的数据</p>
      </div>
    </div>
  </template>
  <template v-else
    ><feed-back
      :is-requesting="isRequesting"
      :is-error="isError"
      message="请求出错啦"
      @retry="getTagFriends"
    ></feed-back
  ></template>
</template>

<script lang="ts" setup>
import { ref, watch, onBeforeMount, computed } from "vue";
import { source, refreshAxios } from "@/plugins/http";
import { useFriendPinia } from "@/pinia/friend";
import { storeToRefs } from "pinia";
import friendsListData from "./friendsListData.vue";

const props = defineProps<{
  title: "all" | "disabledOtherLook" | "disabledSelfLook" | "groups";
  type?: string;
}>();

const friendStore = useFriendPinia();
const { friendsManage, isRequFriendsManage } = storeToRefs(friendStore);

const friendsList = computed(() => {
  switch (props.title) {
    case "all":
    case "disabledOtherLook":
    case "disabledSelfLook":
      return friendsManage.value.get(props.title)?.noGroups?.friends!;
    case "groups":
      return friendsManage.value.get("groups")?.groups?.get(props.type!)?.friends!;
  }
});

/**
 * 是否显示好友的详情信息
 */
const show = ref<boolean>(false);
/**
 * 是否正在请求好友的详情消息
 */
const isRequesting = ref<boolean>(false);
/**
 * 请求是否出错
 */
const isError = ref<boolean>(false);

// 请求对应分组下的好友列表数据
const getTagFriends = () => {
  // 取消上一次请求
  if (isRequesting.value) {
    source.cancel();
    refreshAxios();
    isRequesting.value = false;
  }
  if (isError.value) isError.value = false;
  if (show.value) show.value = false;
  isRequesting.value = true;
  friendStore
    .getTagFriends({
      title: props.title,
      type: props.type ? props.type : "",
    })
    .then((code: number) => {
      isRequesting.value = false;
      if (code === 1) show.value = true;
      else isError.value = true;
    })
    .catch(() => {
      isRequesting.value = false;
      isError.value = true;
    });
};

watch(
  () => props.type,
  (newType) => {
    if (newType) {
      const friendsList = friendsManage.value.get("groups")?.groups?.get(newType)!;
      if (!friendsList?.isRequest) getTagFriends();
      else if (!show.value) show.value = true;
    }
  }
);

watch(
  () => props.title,
  (newTitle) => {
    if (newTitle !== "groups") {
      switch (newTitle) {
        case "all":
        case "disabledOtherLook":
        case "disabledSelfLook":
          if (!friendsManage.value.get(newTitle)?.noGroups?.isRequest) getTagFriends();
          else if (!show.value) show.value = true;
          break;
      }
    }
  }
);

onBeforeMount(() => {
  if (isRequFriendsManage.value) {
    switch (props.title) {
      case "all":
      case "disabledOtherLook":
      case "disabledSelfLook":
        if (!friendsManage.value.get(props.title)?.noGroups?.isRequest) getTagFriends();
        else if (!show.value) show.value = true;
        break;
      case "groups":
        if (!friendsManage.value.get(props.title)?.groups?.get(props.type!)?.isRequest)
          getTagFriends();
        else if (!show.value) show.value = true;
        break;
    }
  } else {
    const timing = setInterval(() => {
      if (isRequFriendsManage.value) {
        clearInterval(timing);
        getTagFriends();
      }
    }, 10);
  }
});
</script>

<style lang="scss" scoped>
.friManage {
  &-empty {
    @include setWidHei(100%, 100%);

    & > div {
      text-align: center;
    }

    &__icon {
      @include setWidHei(80px, 80px);
    }

    &__desc {
      font-size: 14px;
      color: #cdcdcd;
    }
  }
}
</style>
